<template>
    <div id="qrCode">
        <el-row style="margin-top: 10px;">
            <el-col :span="12">

            </el-col>

            <el-col :span="12" :offset="6">
                <el-form :inline="true" class="demo-form-inline" :model="params" style="margin: 0 auto">
                    <el-form-item label="菜品价格">
                        <el-input v-model="params.price" placeholder="菜品价格" class="input-width"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="qrCode">生成</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <div style="margin: 0 auto; width: 300px;min-width: 300px;">
            <div id="qrcode" ref="qrcode"></div>
        </div>
    </div>
</template>
<script>
    import QRCode from 'qrcodejs2'
    import Echo from 'laravel-echo'
    import io from 'socket.io-client'

    export default {
        name: "QRcode",
        /*mounted() {
            window.io = io
            window.Echo = new Echo({
                broadcaster: 'socket.io',
                host: 'http://localhost:6001',
                auth: { headers: { 'Authorization': 'Bearer ' + '89f22aa1b72f9b74e71f721cce838ea4' } }
            })
            window.Echo.channel('.order_price').listen('OrderPriceNotice', (res) => {
                console.log(res);
                if (res.status === 200) {
                    console.log(res.message)
                } else {
                    console.log('something wrong!')
                }
            })
        },*/
        data() {
            return {
                params: {
                    price: 12
                }

            }
        },

        components: {
            'QRCode': QRCode
        },

        methods: {
            qrCode() {
                this.$refs.qrcode.innerHTML = '';
                let qrcode = new QRCode('qrcode', {
                    width: 150, //图像宽度
                    height: 150, //图像高度
                    colorDark: "#000000", //前景色
                    colorLight: "#ffffff", //背景色
                    typeNumber: 4,
                    correctLevel: QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
                });
                qrcode.clear(); //清除二维码
                let order_price = this.getOrderPrice();
                qrcode.makeCode(order_price);//生成另一个新的二维码
            },
            getOrderPrice() {
                let timestamp = 'timestamp=' + (new Date()).getTime();
                let order_price = 'order_price=' + this.params.price;
                // return timestamp + '&' + order_price;
                return order_price;
            }
        },
    }
</script>

<style scoped>

</style>
